<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>查看详情页面</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="assets/layui/css/layui.css">
  <link rel="stylesheet" href="assets/css/all.css" />
  <style>
  	.layui-layer-phimg img{
  		height:100%;
  	}
  	.car-detail {
			margin: 20px 0;
		}
		.car-detail .layui-row {
			line-height: 35px;
		}
		.car-detail .title {
			padding-right: 10px;
			font-weight: bold;
		}
		.car-detail .content {
			border: 1px solid #ccc;
			padding-left: 10px;
		}
		.car-detail .pics-wrap img {
			width: 200px;
			margin: 0 15px 15px 0;
		}
		.car-detail .layui-col-sm6 {
			margin-bottom: 20px;
		}
		.content{
			min-height: 37px;
		}
		@media only screen and (min-width: 768px) {
			.car-detail .title {
				text-align: right;
			}
		}
  </style>
</head>
	<body class="car-detail" style="height:100%;">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		  <script src="assets/js/html5.min.js"></script>
		  <script src="assets/js/respond.min.js"></script>
		<![endif]-->   

		<div class="layui-container">
			 <div class="layui-row">
			 		<div class="layui-col-sm6 ">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">车辆编号	</div>
			        	  <div class="layui-col-sm7 content">4420600002017001239</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6 ">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">车辆归属</div>
			        	  <div class="layui-col-sm7 content">个人</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">车型	</div>
			        	  <div class="layui-col-sm7 content">东风日产DFL7168VAK1轿车</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">车牌	</div>
			        	  <div class="layui-col-sm7 content">京JD2345</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">车辆户籍地		</div>
			        	  <div class="layui-col-sm7 content">湖北襄阳</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">车架号（VIN码）		</div>
			        	  <div class="layui-col-sm7 content">LGBH52E06EY199081</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">发动机号		</div>
			        	  <div class="layui-col-sm7 content">LGBH52E06EY199081</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">事故类型		</div>
			        	  <div class="layui-col-sm7 content">单方事故</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">登记日期		</div>
			        	  <div class="layui-col-sm7 content">2017-03-06</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">出险日期		</div>
			        	  <div class="layui-col-sm7 content">2017-09-13</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">车辆性质		</div>
			        	  <div class="layui-col-sm7 content">运营车</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">车辆类型		</div>
			        	  <div class="layui-col-sm7 content">货车</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">承保金额		</div>
			        	  <div class="layui-col-sm7 content">60000</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">估损金额		</div>
			        	  <div class="layui-col-sm7 content">60000</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			      	<div class="layui-row">
			        	  <div class="layui-col-sm5 title">定损金额		</div>
			        	  <div class="layui-col-sm7 content">60000</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">定损员		</div>
			        	  <div class="layui-col-sm7 content">湖北分公司</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">联系电话		</div>
			        	  <div class="layui-col-sm7 content">13641138223</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">发证日期		</div>
			        	  <div class="layui-col-sm7 content">2017-03-06</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">所属分公司		</div>
			        	  <div class="layui-col-sm7 content">湖北分公司</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">所属保险公司		</div>
			        	  <div class="layui-col-sm7 content">阳光</div>
			        </div>
			    </div>
			    <div class="layui-col-sm6">
			        <div class="layui-row">
			        	  <div class="layui-col-sm5 title">车辆停放地		</div>
			        	  <div class="layui-col-sm7 content"></div>
			        </div>
			    </div>
			 </div>
			 <div class="layui-row">
			 	   <div class="layui-col-sm2 title">图片		</div>
			     <div class="layui-col-sm10 pics-wrap" id="pics-wrap">
			     	  <img src="assets/img/car.png"/>
			     	  <img src="assets/img/card.png"/>
			     	  <img src="assets/img/car.png"/>
			     	  <img src="assets/img/car.png"/>
			     	  <img src="assets/img/car.png"/>
			     	  <img src="assets/img/car.png"/>
			     	  <div><button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe601;</i>批量下载图片  </button></div>
			     	  
			     </div>
			     
			 </div>
			 <!--<div class="reject-wrap"></div>
			 <div class="layui-row" style="text-align: center;">
			 	   <button class="layui-btn">审核通过</button>
			 	   <button class="layui-btn layui-btn-danger reject-btn">驳回</button>
			 </div>-->
		</div>
    <script src="assets/layui/layui.js"></script>
    <script type="text/javascript" src="assets/js/all.js" ></script>
    <script type="text/javascript">
			layui.use(['form','layer'],function(){
						var form = layui.form,
							layer = layui.layer,
							$ = layui.$
							
							//车辆详情页面js
//							$(".car-detail .pics-wrap img").on('click', function() {
//								var theSrc = $(this).attr('src');
//								layer.open({
//									type: 1,
//									title: false,
//									closeBtn: 0,
//									area: '600px',
//									skin: 'layui-layer-nobg', //没有背景色
//									shadeClose: true,
//									content: '<img style="width:100%" src="' + theSrc + '"/>'
//								});
//							});
							//驳回
							$(".car-detail .reject-btn").on("click",function(){
								layer.open({
									type: 1,
									title: '驳回原因',
									area: ['500px','350px'],
									shadeClose: true,
									btn: ['确认', '取消'],
									yes:function(index){
										var resionContent = $(".reject-resion textarea").val();
										var rejectLine = '<div class="layui-row" style="margin:20px 0"><div class="layui-col-sm2 title">驳回原因</div><div class="layui-col-sm10"><textarea class="layui-textarea" style="width:640px;height:100px;">'+resionContent+'</textarea></div></div>';
										$(".reject-wrap").append(rejectLine);
										layer.close(index);
									},
									content: '<div class="layui-form-item reject-resion" style="margin:20px 0"><label class="layui-form-label" style="width:106px;">请填写驳回原因</label><div class="layui-input-inline"><textarea class="layui-textarea" style="width:300px;height:200px;"></textarea></div></div>'
								});
							});
			})
		</script>
	</body>
</html>
